<template>
	<view>

		<view class="box">
			<view class="items">
				<text>约会主题:</text>
				<view class="right">
					<input type="text" maxlength="30" value="" placeholder="请输入约会主题" @blur="tBlur" @confirm="tConfirm" />
				</view>
			</view>

			<view class="items">
				<text>约会时间:</text>
				<view class="right">
					<input disabled="true" :value="info.engagementtime" placeholder="请选择约会时间" @tap="selectDatePicker('datetime',3)" />
					<i class="iconfont iconicon_riqi icons "></i>
				</view>
			</view>

			<view class="items">
				<text>约会地点:</text>
				<view class="right">
					<view class="place" @tap="choose">
						{{ info.place?address.name:'请选择约会地点' }}
					</view>
					<i class="iconfont iconicon_dingwei icons "></i>
				</view>
			</view>

			<view class="items">
				<text>男士最多(个):</text>
				<view class="right">
					<input type="number" :value="info.man?info.man:''" maxlength="2" placeholder="请输入个数" @blur="mBlur" @confirm="mConfirm" />
				</view>
			</view>

			<view class="items">
				<text>女士最多(个):</text>
				<view class="right">
					<input type="number" :value="info.woman?info.woman:''" maxlength="2" placeholder="请输入个数" @blur="wBlur" @confirm="wConfirm" />
				</view>
			</view>

			<textarea value="" placeholder="请输入约会简介" class="fix-text" @blur="textBlur" @confirm="textConfirm" />

			</view>
		
		<view class="btn-box">
			<view class="btn" @tap="doSomething" >发布约会</view>
		</view>
		
		
		<date-time-picker ref='date-time' :indicatorStyle='indicatorStyle' :type='type' :datestring='dateString' @change='dateTimeChange'></date-time-picker>


	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import DateTimePicker from '../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
	export default {
		data() {
			return {
				/**
				 * date 年月日
				 * year-month 年月
				 * year 年
				 * datetime 年月日 时分
				 * datetime-all 年月日 时分秒
				 * time 时分秒
				 * hour-minute 时分
				 */
				info:{
					title:'',
					engagementtime:'',
					place:'',
					man:'',
					woman:'',
					describe:''
				},
				address:{},
				dateString: '',
				type: 'datetime',
			};
		},
		components: {
			DateTimePicker
		},
		computed: {
			...mapState(['token']),
			indicatorStyle() {
				return {
					background: 'rgba(0,0,0,.1)',
					height: '40px',
				};
			}
		},
		onLoad() {

		},
		methods: {
			choose(){
				uni.authorize({
				    scope: 'scope.userLocation',
				    success:(res)=> {
						console.log(res);
				        uni.chooseLocation({
				            success: (res)=> {
				                console.log('位置名称：' + res.name);
				                console.log('详细地址：' + res.address);
				                console.log('纬度：' + res.latitude);
				                console.log('经度：' + res.longitude);
								let obj = {name:res.name,place:res.address};
								this.address = obj;
								this.info.place = res.name+'-'+res.address;
				            }
				        });
				    },
					fail: (res) => {
						console.log(res);
						uni.showModal({
							title:'提示',
							content:'检测到您还未打开位置信息功能权限,请先手动打开',
							showCancel:true,
							success: (res) => {
								if(res.confirm){
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									});
								}else{
									console.log('用户点击了取消')
								}
							}
						})
					}
				})
				// uni.chooseLocation({
				//     success:(res)=> {
				//         console.log('位置名称：' + res.name);
				//         console.log('详细地址：' + res.address);
				//         console.log('纬度：' + res.latitude);
				//         console.log('经度：' + res.longitude);
				// 		let obj = {name:res.name,place:res.address};
				// 		this.address = obj;
				// 		this.info.place = res.name+'-'+res.address;
				//     },
				// 	fail: (res) => {
				// 		console.log(res);
				// 	}
				// });
			},
			selectDatePicker() {
				this.$refs['date-time'].show();
			},
			dateTimeChange(value) {
				console.log(value);
				this.info.engagementtime = value+':00';
			},
			//点击发布
			doSomething(){
				uni.showLoading({
					title:'正在发布...',
					mask:true
				});
				setTimeout(()=> {
					uni.hideLoading();
					if(!this.info.title){
						uni.showToast({
							title:'请先输入约会主题!',
							icon:'none'
						})
						return false;
					}
					
					if(!this.info.engagementtime){
						uni.showToast({
							title:'请先选择约会时间!',
							icon:'none'
						})
						return false;
					}
					
					if(!this.info.place){
						uni.showToast({
							title:'请先选择约会地点!',
							icon:'none'
						})
						return false;
					}
					
					if(!this.info.man){
						uni.showToast({
							title:'请先输入男士人数!',
							icon:'none'
						})
						return false;
					}
					
					if(!this.info.woman){
						uni.showToast({
							title:'请先输入女士人数!',
							icon:'none'
						})
						return false;
					}
					
					if(!this.info.describe){
						uni.showToast({
							title:'请先输入约会简介!',
							icon:'none'
						})
						return false;
					}
					//执行上传
					this.upInfo();
				},500)
			},
			async upInfo(){
				try{
					let params = { token:this.token,...this.info };
					let res = await this.$request.request.get('/api/engagement/release',params)
					console.log(res);
					if(res.code ==200){
						//跳转支付页
						uni.navigateTo({
							url:'/pages/my/payInfo?orderNo='+res.data.orderNo+'&type=1'+'&price='+res.data.price+'&title='+res.data.title
						})
					}
				}catch(err){
				    this.$request.error(err,this)
				}
			},
			//标题
			tBlur(e){
				this.info.title = e.detail.value;
			},
			tConfirm(e){
				this.info.title = e.detail.value;
			},
			//男士
			mBlur(e){
				this.info.man = e.detail.value;
			},
			mConfirm(e){
				this.info.man = e.detail.value;
			},
			//女士
			wBlur(e){
				this.info.woman = e.detail.value;
			},
			wConfirm(e){
				this.info.woman = e.detail.value;
			},
			//富文本
			textBlur(e){
				this.info.describe = e.detail.value;
			},
			textConfirm(e){
				this.info.describe = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	@import 'releaseDate.scss'
</style>
